<!-- js代码-->
<script setup>
import { watch } from 'vue';
import {useRoute} from 'vue-router'
import { reactive ,onMounted,ref} from 'vue';

const route = useRoute()
const breadcrumbData = ref([])

// 更新面包屑数据的方法
const updateBreadcrumb = () => {
    breadcrumbData.value = route.matched.filter(item => item.meta && item.meta.title);
};


 // 监听路由变化
    watch(() => route.path, () => {
      updateBreadcrumb();
    });

  // 初始化时调用一次
    onMounted(async() => {
      await updateBreadcrumb();
    //   await menuList()
    });

    //动态获取菜单及其权限
    import { info } from '../api/Login';
    import { useUserInfoStore } from "../store/index"
    const userStore = useUserInfoStore()
    // // const menus = ref();
    // const menuList = async()=>{
    //     if(!(userStore.nav && userStore.nav.length >0)){
    //         let result = await info()
    //         userStore.setNav(result.data.data.menus)
    //         // menus.value = result.data.data.menus
    //     }


    // }

</script>
<!-- html -->
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px" class="aside">
                <!-- <el-menu
                    :router="true"
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    text-color="#fff"
                >
                     <el-menu-item index="/home">首页</el-menu-item>
                    <el-sub-menu>
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="/system/dept">部门管理</el-menu-item>
                        <el-menu-item index="/system/emp">员工管理</el-menu-item>
                        <el-menu-item index="/system/role">角色管理</el-menu-item>
                        <el-menu-item index="/system/permission">权限管理</el-menu-item>
                    </el-sub-menu>
                </el-menu> -->
                <el-menu
                    :router="true"
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    text-color="#fff"
                >
                     <el-menu-item index="/home">首页</el-menu-item>
                     <template v-for="(menu,index) in userStore.nav" :key="index">
                        <el-sub-menu v-if="menu.type === 1">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>{{menu.title}}</span>
                            </template>
                            <template v-for="(childMenu,index) in menu.children" :key="index">
                                <el-menu-item :index="childMenu.path" v-if="childMenu.type===2">{{childMenu.title}}</el-menu-item>
                            </template>
                        </el-sub-menu>
                     </template>
                    
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <!--面包屑导航-->
                    <div>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index" :to="item.path">
                            {{ item.meta.title }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div> 
                    <!-- 显示用户信息 及其退出-->
                    <div>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                欢迎: 张三
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                            </span>
                            <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item>查看个人信息</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>   
                </el-header>
                <el-main class="main">
                    <!--二级路由出口-->
                    <router-view>
                
                    </router-view>

                </el-main>
            </el-container>
        </el-container>
    </div>

</template>
<!-- 样式 -->
<style lang="css" scoped>
.aside{
    height:100vh;
    overflow-y: auto;
    background-color: #545c64;
}

.header{
    background-color: antiquewhite;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 60px;
}
.el-menu{
    border:none
}

.header > div{
    line-height: 60px;
    display: flex;
    align-items: center;
}

</style>